<template>
  <div class="map-footer">
    <div class="footer-item">
      <RankPannel icon="./img/title/15.png" title="预警信息">
      <div class="box">
        <ul class="item-list" :class="{anim:animate==true}">
          <li v-for="item in orderList" :key="item.areaCode" class="list-li">
            <div class="name">{{ item.areaName }}</div>
            <div class="number">
              <countTo :startVal="0" :endVal="item.uploadNum" :duration="5000" />
            </div>
          </li>
        </ul>
        </div>
      </RankPannel>
    </div>
    <div class="footer-item">
      <RankPannel icon="./img/title/15.png" title="报警信息">
       <div class="box">
        <ul class="item-list" :class="{anim:animate==true}">
          <li v-for="item in weighList" :key="item.areaCode" class="list-li">
            <div class="name">{{ item.name }}</div>
            <div class="number">
              <countTo :startVal="0" :endVal="item.number" :duration="5000" />
            </div>
          </li>
        </ul>
        </div>
      </RankPannel>
    </div>
  </div>
</template>

<script>
import {
  GetCompanyListByArea,
  GetCompanyListByProperty,
  GetCompanyListByRegulator,
  GetRankingWaybill,
  GetRankingWeightRecord,
} from "@/api/screenApi";
import countTo from "vue-count-to";
import Pie2 from "@/components/Pie2";
import Pie3 from '@/components/Pie3';
import Bar4 from "@/components/Bar4";
import RankPannel from "@/components/RankPanel";
import SwiperPanel from "@/components/SwiperPanel";
export default {
  name: "mapfooter",
  data() {
    return {
      animate:false,
        currentNav:0,
      orderList: [],
      weighList: [],
      companyArea: [],
      barNames: [],
      companyProperty: [],
      leftnames:[],
      rightnames:[],
      companyRegulator:[],
      RegulatorNames:[]
    };
  },
  created() {
    Promise.all([this.GetOrders(), this.GetWeigh(), this.GetCompanyArea(),this.GetCompanyProperty(),this.GetCompanyRegulator()]);
    setInterval(this.scroll,1000)
  },
  components: {
    Bar4,
    Pie2,
    Pie3,
    countTo,
    RankPannel,
    SwiperPanel
  },
  methods: {
     scroll(){
       this.animate=true;    // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
       setTimeout(()=>{      //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
               this.orderList.push(this.orderList[0]);  // 将数组的第一个元素添加到数组的
               this.orderList.shift();               //删除数组的第一个元素
               this.animate=false;  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
       },500)
    },
    //获取七日内运单排行榜
    async GetOrders() {
      try {
        const list = await GetRankingWaybill();
        this.orderList = list.sort((el1, el2) => {
          return el2.uploadNum - el1.uploadNum;
        });
      } catch (err) {
        // eslint-disable-next-line no-console
        console.log(err);
      }
    },
    //获取七日区域称重排行
    async GetWeigh() {
      try {
        const list = await GetRankingWeightRecord();
        this.weighList = list.sort((el1, el2) => {
          return el2.number - el1.number;
        });
      } catch (err) {
        // eslint-disable-next-line no-console
        console.log(err);
      }
    },
    //获取源头企业数量（区域
    async GetCompanyArea() {
      try {
        let list = await GetCompanyListByArea();
        this.companyArea = list.map((el) => el.number);
        this.barNames = list.map((el) => el.name);
      } catch (err) {
        // eslint-disable-next-line no-console
        console.log(err);
      }
    },
    //获取源头企业（企业性质)
    async GetCompanyProperty() {
      try {
        let list = await GetCompanyListByProperty();
        list.forEach((el) => {
            el.value = el.number
        });
        this.companyProperty = list
        let names = list.map(el=>el.name)
        this.leftnames = names.slice(0,names.length%2==0?names.length/2:(names.length+1)/2)
        this.rightnames = names.slice(names.length%2==0?names.length/2:(names.length+1)/2,names.length)
      } catch (err) {
        // eslint-disable-next-line no-console
        console.log(err);
      }
    },
    //获取源头企业企业数量（监管单位）
    async GetCompanyRegulator() {
      try {
        let list = await GetCompanyListByRegulator();
        list.forEach(el=>{
            el.value = el.number;
        });
        this.companyRegulator = list
        this.RegulatorNames = list.map((el) => el.name)
      } catch (err) {
        // eslint-disable-next-line no-console
        console.log(err);
      }
    },
    //选择企业性质
    selectType(index){
        this.currentNav = index
    }
  },
};
</script>

<style lang="scss" scoped>
.map-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  width: calc(100% - 20px);
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .footer-item {
    flex: 1;
    height: 194px;
    padding: 0 5px;
    box-sizing: border-box;
     .box{
       overflow:hidden;
       height:164px;
     }
    .item-list {
      width: 100%;
      height:100%;
      margin: 0;
      padding: 0;
      list-style: none;
      padding: 0 25px;
      box-sizing: border-box;
      .list-li {
        width: 100%;
         height:20%;
        line-height: 20%;
        font-size: 10px;
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .anim{
    transition: all .5s;
    margin-top: -8%;
}
  }
  .rank-title {
    font-size: 13px !important;
    color: #fff;
    overflow:hidden;
  }
  .footer-echarts {
    flex: 1.5;
    height: 194px;
    padding-left: 5px;
    .pie{
      width:100%!important;
      height:100%!important;
    }
  }
}
.whiteSkin{
   .list-li {
     color:#000!important;
   }
}
</style>
